<template>
  <div class="createOrder">
    <nut-navbar :rightShow="false">填写订单 <a slot="left" @click="back"></a>
    </nut-navbar>
    <!--收货信息-->
    <SelectAddress @def="getDef" @func="getAddress" :state="addressState"></SelectAddress>
    <div class="addressPart" @click="openAddress">
      <div>
        <p>
          <!--          .replace(/,/g,"")-->
          <span v-show="Address.id==defAddressId" class="span1">默认</span> <span style="margin-left: 2px;background: blue"
            v-show="Address.remarks!=''"
            class="span1"> {{ Address.remarks }}</span> <span class="span2">{{ Address.address }}</span>
        </p>
        <p><span class="span3">{{ Address.addressees }}</span></p>
        <p>
          <span class="span4">{{ Address.addressee }}</span> <span class="span5">{{ Address.addresseephone }}</span>
        </p>
      </div>
      <p>
        <svg t="1608624230357" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1737" width="20" height="20">
          <path d="M256.045025 132.573411l61.349253-61.350277c8.94165-8.94165 23.146163-9.156544 31.787984-0.514723l419.291528 426.585655c8.640798 8.630564 8.405437 22.877033-0.493234 31.797194l-61.391209 61.372789c-3.551896 3.539616-8.001231 5.326309-12.536524 6.096858l-343.330486 356.806405c-8.535397 8.54563-22.63144 8.321526-31.444153-0.5137l-60.774155-60.750619c-8.834202-8.823969-9.05012-22.921036-0.49221-31.476899l337.298096-350.551958-339.77859-345.701486C246.890528 155.717528 247.103376 141.515061 256.045025 132.573411z"
              p-id="1738"></path>
        </svg>
      </p>
    </div>
    <hr/>
    <!--具体商品-->

    <div class="orders">
      <div class="order" v-for="item in goodsInfos">
        <div>
          <div><img class="goodsImg" :src="item.image"></div>
        </div>
        <div class="orderMain">
          <span class="goodsName">{{ item.name }}</span>
          <div class="pan">
            <nut-price class="goodsPrice" :price="item.price" :needSymbol="true" :thousands="false"/>
            <nut-stepper :transition="false" :min="1" :max="10" :value.sync="item.number" :readonly="true"></nut-stepper>
          </div>
        </div>
      </div>
    </div>

    <!--合计-->
    <div class="footer">
      <div>
        <nut-price class="prices" :price="allPrice" :decimalDigits="2" :needSymbol="true" :thousands="true"/>
      </div>
      <nut-button @click="subOrder" type="primary" shape="circle" small>
        提交订单
      </nut-button>
    </div>
  </div>
</template>

<script>
import ShopCarGoods from "@/components/ShopCarGoods";
import AddAddress from "@/components/AddAddress";
import SelectAddress from "@/components/SelectAddress";

export default {
  name: "CreateOrder",
  components: {SelectAddress, AddAddress, ShopCarGoods},
  data() {
    return {
      val: '',
      liuyan: '',
      test: true,
      goodsInfos: [],
      addressState: 0,
      Address: {},
      defAddressId: -1,
      orders: [],
      orderInfos: [],
    }
  },
  methods: {
    addNoAllow() {
      alert('超出最大限制')
    },
    getAddress(res) {
      this.Address = res;
    },
    reduceNoAllow() {
      alert('超出最小限制')
    },
    back() {

    },
    openAddress() {
      this.addressState == 0 ? this.addressState = 1 : this.addressState = 0;
    },
    getDef(res) {
      this.defAddressId = res;
    },
    subOrder() {

      if(Object.keys(this.Address).length === 0)
      {
        this.$notify.primary('请选择地址');
        return
      }
      this.orderInfos=[];
      this.orders=[];

      for (let i = 0; i < this.goodsInfos.length; i++) {
        const order = {
          "goodsId": this.goodsInfos[i].goodsId,
          "goodsinfoId": this.goodsInfos[i].id,
          "userId": this.$cookies.get("userid"),
          "allprice": this.allPrice,
          "state": 0,
          "obj1": this.goodsInfos[i].number  //number
        };
        const orderInfo = {
          "orderId": '',
          "addressId": this.Address.id,
          "logisticsid": "",
          "obj2": null, // 订单编号
        };
        this.orders.push(order);
        this.orderInfos.push(orderInfo);

        this.$axios.post("/order/addorder", {"orders":this.orders,"orderinfos":this.orderInfos}).then(
            res=>{
              if(res.data.code==200)
              {
                  window.location.href=this.$url+res.data.data;
              }else
              {
                this.$notify.primary(res.data.data);
              }
            }
        )

      }
    }
  },
  computed: {
    allPrice() {
      let goodsInfos = this.goodsInfos;
      let allPrice = 0;
      for (let i = 0; i < goodsInfos.length; i++) {
        allPrice += goodsInfos[i].number * goodsInfos[i].price
      }
      return allPrice;
    }
  },
  mounted() {
    this.goodsInfos = JSON.parse(this.$route.query.goodsInfos);
  },
  beforeCreate(to, from, next) {
  }
}
</script>

<style scoped>
.createOrder {
  width: 100%;
}

.addressPart {
  width: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  height: 15vh;
}

.addressPart ~ hr {
  display: block;
  margin: 0px;
  padding: 0px;
  border: none;
  width: 100%;
  height: 3px;
  background: repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
  #58a 0, #58a 3em, transparent 0, transparent 4em);
  border-radius: 15px;
}

.check {
  border-radius: 15px;
}

.addressPart > div {
  height: 120px;
}

.addressPart > p {
  line-height: 120px;
  margin: 0px;
  padding: 0px;
}

.orders {
  margin-top: 15px;
}

.order {
  background: white;
  padding: 10px;
  display: flex;
  margin-top: 10px;
  border-radius: 15px;
}

.goodsPrice {
  color: #f0250f;
}

.orderMain {
  width: 65%;
}

.goodsImg {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  margin-right: 10px;
}

.goodsName {
  display: block; /* 需要 */
  white-space: nowrap; /* 过长部分不换行 */
  text-overflow: ellipsis; /* 过长部分展示省略号 */
  overflow: hidden; /* 隐藏过长部分 */
  font-size: 15px;
}

.pan {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

>>> .nut-stepper, .nut-stepper-simple {
  width: 73px;
  height: 22px;
  border-radius: 11px;
}

>>> .nut-stepper-simple > input {
  border-radius: 5px;
  font-size: 13px;
  margin: 0 6px;
  text-align: center;
}

.list-li > div > p .price {
  display: inline-block;
  line-height: 2em;
}

.p2 {
  display: flex;
  justify-content: space-between;
}

.footer {
  height: 6vh;
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0px;
}

.prices {
  color: #f31a00;
  font-size: 22px;
  font-weight: 700;
  transform: scale(1.5);
}

>>> .prices > .price-big {
  font-size: 20px;
}

>>> .prices > .price-small {
  font-size: 14px;
}

.span1 {
  background: #f0250f;
  color: white;
  font-size: 10px;
  padding: 4px;
  border-radius: 5px;
}

.span2 {
  font-size: 10px;
  padding: 4px;
  color: #6a6a6a;
}

.span3 {
  font-weight: bold;
  font-size: 17px;
}

.span4 {
  font-size: 14px;
}

.span5 {
  font-size: 14px;
}

p {
  margin: 10px 0;
}

.goodsTitle {
  font-size: 15px;
  font-weight: 500;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
